<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023/6/15
  Time: 14:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.staticfile.org/layui/2.8.6/css/layui.css" rel="stylesheet">
    <script src="//cdn.staticfile.org/layui/2.8.6/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->
<div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px">名称搜索：</label>
            <div class="layui-input-inline">
                <input type="text" id="searchInput" name="materialsName" placeholder="请输入物料名" class="layui-input" style="margin-bottom: 10px">
            </div>
            <button class="layui-btn" lay-event="search" style="margin-left: 10px" >搜索</button>
        </div>

        <button class="layui-btn layui-btn-sm-btn" lay-event="add" style="margin-left: 10px">添加物料</button>
        <%--<button class="layui-btn layui-btn-sm" lay-event="addInventory" id="storeAreaButton" style="height: 38px">--%>
            <%--根据仓库区域查询--%>
        <%--</button>--%>
    </div>
</script>
<div id="addForm" style="display: none;">
    <form class="layui-form layui-form-pane" id="fm" lay-filter="addForm" action="#">
        <div class="layui-form-item">
            <label class="layui-form-label">仓库编号</label>
            <div class="layui-input-block">
                <input type="text"  id="storeNumber" name="storeNumber" lay-verify="required" placeholder="仓库编号" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">仓库区域</label>
            <div class="layui-input-block">
                <input type="text" id="storeAreaName" name="storeAreaName" lay-verify="required" placeholder="仓库区域" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">批次号</label>
            <div class="layui-input-block">
                <input type="text" id="batchNumber" name="batchNumber" lay-verify="required" placeholder="批次号" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" id="materialsName" name="materialsName" lay-verify="required" placeholder="名称" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">颜色</label>
            <div class="layui-input-block">
                <input type="text" id="colorName" name="colorName" lay-verify="required" placeholder="颜色" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">对应的商品</label>
            <div class="layui-input-block">
                <input type="text" id="productName" name="productName" lay-verify="required" placeholder="对应的商品" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">进货数量</label>
            <div class="layui-input-block">
                <input type="text" id="batchCount" name="batchCount" lay-verify="required" placeholder="进货数量" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">进货时间</label>
            <div class="layui-input-block">
                <input type="text" id="batchTime" name="batchTime" lay-verify="required" placeholder="进货时间" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">库存</label>
            <div class="layui-input-block">
                <input type="text" id="productionCount" name="productionCount" lay-verify="required" placeholder="库存" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">入库时间</label>
            <div class="layui-input-block">
                <input type="text" id="inputTime" name="inputTime" lay-verify="required" placeholder="入库时间" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">出库时间</label>
            <div class="layui-input-block">
                <input type="text" id="outputTime" name="outputTime" lay-verify="required" placeholder="出库时间" autocomplete="off" class="layui-input">
            </div>
            <table id="demo" lay-filter="test"></table>
        </div>
        <!-- 其他表单字段 -->
    </form>
</div>
<div id="addInventory" style="display: none;margin-left: 100px">
    <form class="layui-form layui-form-pane" id="fm1" lay-filter="addForm1" action="#">
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    盘点数量
                    <input type="text"  name="inventoryCount" required placeholder="盘点数量" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!-- 其他表单字段 -->
    </form>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </div>
</div>
<script>
    layui.use(['table', 'dropdown'], function(){
        var table = layui.table;
        var dropdown = layui.dropdown;
        // 创建渲染实例
        table.render({
            elem: '#test',
            url:'warehouse/queryAllWarehouseStoreAreaBatchView',
            toolbar: '#toolbarDemo'
            ,limit:4
            ,limits:[4,8,12]
            ,defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            /* height: 'full-35', // 最大高度减去其他容器已占有的高度差*/
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            parseDate:function(res){
                return{
                    "code":res.status,
                    "msg":res.message,
                    "count":res.total,
                    "data":res.data[0]
                }
            },
            cols: [[
                {field: 'storeNumber', fixed: 'left',title:'仓库编号',width:100},
                {field:'storeAreaName', fixed: 'left', width:100, title: '仓库区域'},
                {field:'batchNumber', width:80, title: '批次号',width:150},
                {field:'materialsName', title:'名称',  width:150},
                {field:'colorName', width:80, title: '颜色'},
                // {field:'productName', width:115, title: '对应的商品', minWidth:115},
                {field:'batchCount', title: '进货数量', width: 100},
                {field:'batchTime', width: 110, title: '进货时间', sort: true},
                {field:'productionCount', title:'库存', width: 80, sort: true},
                {field:'inputTime', title:'入库时间', width: 110, sort: true},
                {field:'outputTime', title:'出库时间', width: 110, sort: true},
                {field:"inventory",title: '盘点数量',width:100, templet: function(d){
                        return '<input type="text" style="margin-top: -5px" class="layui-input">';
                    }},
                {fixed: 'right', title:'操作', width: 200, minWidth: 125, toolbar: '#barDemo'},
            ]],
            done: function(){
                var id = this.id;
            },
            error: function(res, msg){
                console.log(res, msg)
            }
        });
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(data)
            if(obj.event === 'inventory'){ //盘点
                var inputValue = $('.layui-input', obj.tr).val();
                if (isNaN(inputValue)){
                    alert("盘点必须是数字");
                    return false;
                }
                if (inputValue == null || inputValue == ""){
                    alert("盘点不能为空");
                    return false;
                }
                let productionCount = data.productionCount;
                let profitAndLossNum =inputValue- productionCount;
                let storeAreaWarehouseId = data.storeAreaWarehouseId;
                let orderId = data.orderId;;
                $.ajax({
                    "url": "warehouse/queryInventory",
                    "type": "get",
                    "data": {orderId:orderId},
                    "dataType": "json",
                    "contentType": "application/json;charset=utf-8;",
                    "success": function(result) {
                        console.log(result);
                        if (result.code != '208'){
                            add();
                        }else {
                            layer.msg(result.msg);
                        }
                        $('.layui-input', obj.tr).val(" ");
                        var table = layui.table;
                        table.render("test");
                    },
                    "error": function() {
                        alert("出错了");
                    }
                });
                function add() {
                    let data1 = {
                        storeAreaWarehouseRelId:storeAreaWarehouseId,
                        inventoryCount:inputValue,
                        profitAndLossNum:profitAndLossNum,
                        orderId:orderId
                    }
                    let info = JSON.stringify(data1);
                    console.log(info)
                    $.ajax({
                        "url": "warehouse/addInventory",
                        "type": "post",
                        "data": info,
                        "dataType": "json",
                        "contentType": "application/json;charset=utf-8;",
                        "success": function(result) {
                            console.log(result);
                            layer.msg(result.msg);
                            table.reload("test");
                            $('.layui-input', obj.tr).val(" ");
                        },
                        "error": function() {
                            alert("出错了");
                        }
                    });
                }
            }else if (obj.event === 'deleteProduct'){
                var orderId = data.orderId; // 提取订单ID
                $.ajax({
                    url: 'warehouse/updatOrderAuditStatus',
                    type: 'post',
                    data: {orderId:orderId},
                    dataType: 'text',
                    // contentType: 'application/json;charset=utf-8',
                    success: function(result) {
                        if(result>0){
                            // alert(")
                            layer.msg('交货成功,请去到订单管理详情');
                            table.reload('test')
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert('请求失败，错误信息：' + errorThrown);
                    }
                });
            }
        })
        // 工具栏事件
        table.on('toolbar(test)', function(obj){
            console.log(obj.event)
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch(obj.event){
                case 'add':
                    // var data = checkStatus.data;
                    // layer.alert(layui.util.escape(JSON.stringify(data)));
                    layer.open({
                        title: '添加物料',
                        type:2,
                        area: ['80%', '85%'], // 弹窗大小
                        content: "toAddWarehouse",
                        btn: ['确认', '取消'],
                        yes: function(index, layero){
                            location.reload();
                            layer.close(index); // 关闭弹窗
                        },
                        btn2: function(index, layero){
                            layer.close(index);
                        }
                    });
                    break;
                case 'addInventory':
                    // 获取数据表格中的所有数据
                    var tableData = layui.table.cache['test'];
                    console.log('数据表格中的所有数据：', tableData);
                    layer.open({
                        type: 1,
                        title: '盘点',
                        content: $("#addInventory"),
                        area: ['400px', '250px'],
                        btn: ['确定', '取消'],
                        yes: function(index, layero){
                            // 获取表单数据
                            // var formData = layui.form.val("addForm1");
                            // 输出表单数据
                            // console.log(formData);
                            // form.on('submit(formDemo)', function(){
                                // $.ajax({
                                //     "url": "warehouse/addMaterialsAndBatch",
                                //     "type": "post",
                                //     "data": date,
                                //     "dataType": "json",
                                //     "contentType": "application/json;charset=utf-8",
                                //     "success": function(result) {
                                //         layer.msg(result.msg)
                                //         form.render('select');
                                //         layer.close();
                                //     },
                                //     "error": function() {
                                //     }
                                // });
                            // })
                        },
                    });
                    layui.form.on('submit(formDemo)', function(data) {
                        var inventoryCount = $("[name = inventoryCount]").val();
                        console.log(inventoryCount)
                        $.ajax({
                            "url": "warehouse/addMaterialsAndBatch",
                            "type": "get",
                            "data": {inventoryCount:inventoryCount},
                            "dataType": "json",
                            "contentType": "application/json;charset=utf-8",
                            "success": function(result) {
                                layer.msg(result.msg)
                                form.render('select');
                                layer.close();
                            },
                            "error": function() {

                            }
                        });
                        // 阻止表单提交
                        return false;
                    });
                    break;

                case 'getData':
                    var getData = table.getData(id);
                    console.log(getData);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
                case 'LAYTABLE_TIPS':
                    layer.alert('自定义工具栏图标按钮');
                    break;
                //这里是搜索框  点击搜索事件
                case 'search':
                    let searchValue = $('[name=materialsName]').val();
                    alert(searchValue)

                    // var searchValue = $('').val();
                    // 创建渲染实例
                    table.render({
                        elem: '#test',
                        url:'${pageContext.request.contextPath}/warehouse/queryByName?searchValue='+searchValue, // 此处为静态模拟数据，实际使用时需换成真实接口
                        toolbar: '#toolbarDemo'
                        ,limit:4
                        ,limits:[4,8,12]
                        ,defaultToolbar: ['filter', 'exports', 'print', {
                            title: '提示',
                            layEvent: 'LAYTABLE_TIPS',
                            icon: 'layui-icon-tips'
                        }],
                        /* height: 'full-35', // 最大高度减去其他容器已占有的高度差*/
                        css: [ // 重设当前表格样式
                            '.layui-table-tool-temp{padding-right: 145px;}'
                        ].join(''),
                        cellMinWidth: 80,
                        totalRow: true, // 开启合计行
                        page: true,
                        parseDate:function(res){
                            return{
                                "code":res.status,
                                "msg":res.message,
                                "count":res.total,
                                "data":res.data[0]
                            }
                        },
                        cols: [[
                            {field: 'orderId', fixed: 'left',title:'订单编号'},
                            {field: 'storeNumber', fixed: 'left',title:'仓库编号'},
                            {field:'storeAreaName', fixed: 'left', width:80, title: '仓库区域', sort: true},
                            {field:'batchNumber', width:80, title: '批次号'},
                            {field:'materialsName', title:'名称', hide: 0, width:150},
                            {field:'colorName', width:80, title: '颜色', sort: true},
                            {field:'productName', width:115, title: '对应的商品', minWidth:115},
                            {field:'batchCount', title: '进货数量', minWidth: 260},
                            {field:'batchTime', width: 100, title: '进货时间', sort: true},
                            {field:'productionCount', title:'库存', width: 100, sort: true},
                            {field:'inputTime', title:'入库时间', width: 100, sort: true},
                            {field:'outputTime', title:'出库时间', width: 100, sort: true},
                            {field:'deliveryTime', title:'交期时间', width: 100, sort: true},
                            {field:'auditStatus', title:'审核状态', width: 100, sort: true,templet:function(b) {
                                    if (b.auditStatus == "0") {
                                        return "未审核";
                                    } else if (b.auditStatus == "1") {
                                        return "已审核";
                                    }
                                }},
                            {fixed: 'right', title:'操作', width: 200, minWidth: 125, toolbar: '#barDemo'}
                        ]],
                        error: function(res, msg){
                            console.log(res, msg)
                        }
                    });
                    break;
                //这里是二号搜索框
                case 'search2':
                    var searchValue2 = $('#searchInput2').val();
                    // 在这里执行搜索操作，使用 searchValue2 变量来获取输入框的值
                    // ...
                    alert(searchValue2);
                    break;
                default:
                    break;
            };
        });
        //这里是对jquery库的引用，可以使得搜索框正常运行
        var $ = layui.$;
    });

</script>

<script type="text/html" id="barDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="particulars" onclick="togetAll()">详情</button>
        <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="inventory">盘点</a>
            {{#
            var currentTime = new Date();
            var deliveryTime = new Date(d.deliveryTime);
            if (d.storeAreaName === '成品' && d.auditStatus === 0 && deliveryTime < currentTime) {
            }}
            <a class="layui-btn layui-btn-danger layui-btn-sm" id="scid" lay-event="deleteProduct">出货</a>
            {{# } }}
    </div>
</script>
<script>
    // $("#addForm").css("display", "block");
</script>
<script>
    function togetAll() {
        var form = layui.form;
        form.render(null, 'addForm');
        layer.open({
            type: 1,
            title: '详情',
            content: $("#addForm"),
            area: ['800px', '500px'],
            btn: ['确定', '取消'],
            yes: function(index, layero){
                location.reload();
                layer.close(index); // 关闭弹窗
            },
            btn2: function(index, layero){
                location.reload();
                layer.close(index); // 关闭弹窗
            },
            success: function (layero, index) {
                var table = layui.table;
                table.reload('demo');
                console.log($("#fm"));
                $("#fm")[0].reset();
            }
        });
        $.ajax({
            url: 'warehouse/togetAllWarehouseStoreAreaBatchView',
            type: 'get',
            data: {},
            dataType: 'json',
            success: function (result) {
                console.log(result)
                if (result && result.length>0) {
                    $("#storeNumber").val(result[0].storeNumber);
                    $("#storeAreaName").val(result[0].storeAreaName);
                    $("#batchNumber").val(result[0].batchNumber);
                    $("#materialsName").val(result[0].materialsName);
                    $("#colorName").val(result[0].colorName);
                    $("#productName").val(result[0].productName);
                    $("#batchCount").val(result[0].batchCount);
                    $("#batchTime").val(result[0].batchTime);
                    $("#productionCount").val(result[0].productionCount);
                    $("#inputTime").val(result[0].inputTime);
                    $("#outputTime").val(result[0].outputTime);
                } else {
                    layer.alert('无法获取数据或数据为空！');
                }
            },
            error: function () {
                layer.alert('网络正忙！');
            }
        });
    }

</script>
</body>
</html>